import { getServiceListByCategory } from "@/api/home";
import { Image, View } from "@tarojs/components"
import Taro, { useLoad, useRouter } from "@tarojs/taro";
import { useEffect, useState } from "react";
import { AtCard } from "taro-ui";

type ServiceList = {
  serviceId: number;
  serviceName: string;
  pic: string;
  description: string;
}

const MoreCard: React.FC<{ categoryId: string | undefined }> = ({ categoryId }) => {

  const [serviceList, setServiceList] = useState<ServiceList[]>([]);

  useEffect(() => {
    const fetchServiceList = async () => {
      const { data } = await getServiceListByCategory(Number(categoryId));
      setServiceList(data);
    }
    fetchServiceList();
  }, [categoryId])

  const handleToService = (serviceId: number, serviceName: string) => {
    Taro.navigateTo({
      url: `/pages/service-list/index?serviceId=${serviceId}&serviceName=${serviceName}`
    })
  }

  return (
    <>
      {
        serviceList.map((item, index) => (
          <AtCard
            title={`${item.serviceName} 服务`}
            key={index}
          >
            <View className='flex justify-between p-2 w-full bg-white' onTap={() => handleToService(item.serviceId, item.serviceName)}>
              <Image src={item.pic} className='h-20 w-20 bg-red-300 rounded-md flex-shrink-0' />
              <View className='flex flex-col px-2 w-full'>
                <View className='text-xl'>{item.serviceName}</View>
                <View className='text-red-500 text-sm font-semibold'>{item.description}</View>
              </View>
            </View>
          </AtCard >
        ))
      }
    </>
  )
}

const HomeMore: React.FC = () => {
  const router = useRouter();

  const { title, id } = router.params;

  useLoad(() => {
    Taro.setNavigationBarTitle({
      title: title || '默认标题'
    });
  })

  return (
    <>
      <View className='flex flex-col gap-y-5 p-2 bg-gray-100 h-screen overflow-y-auto'>
        <MoreCard categoryId={id} />
      </View>
    </>
  )
}

export default HomeMore;
